<template>
  <div class="home">
    <div class="one">
      <span
        >如果您已有公司，<el-link  type="primary"  href="/#/add/company">点击这里</el-link>
        。可直接填写信息，进行财务操作。</span
      >
    </div>
    <div class="step-page">
      <el-steps
        class="el-steps-page"
        :active="companyTable[currentStep].id"
        align-center
        finish-status="success"
      >
        <el-step
          v-for="(item, key) in companyTable"
          :key="key"
          :title="item.name"
          :description="
            companyTable[key].id < companyTable[currentStep].id
              ? '已处理'
              : key === currentStep
              ? '正在处理'
              : '未处理'
          "
        ></el-step>
      </el-steps>
    </div>
    <div class="process">
      <i-mutation
        :table-list="companyTable[currentStep]"
        @confirm="nextStep"
      ></i-mutation>
    </div>
  </div>
</template>

<script type="text/javascript">
import { companyTable } from "../../constants/pages/companyTable";
export default {
  name: "company-step",

  data() {
    return {
      companyTable: companyTable,
      currentStep: "industry",
      addModal: {
        open: false
      },
      data: [{}]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    customEvent(obj) {
      let vm = this;
      if (obj.type === "add") {
        vm.openAdd(obj.params);
      }
    },
    nextStep() {
      let vm = this,
        key;
      for (key in vm.companyTable) {
        if (
          vm.companyTable[vm.currentStep].id + 1 ===
          vm.companyTable[key].id
        ) {
          break;
        }
      }
      vm.currentStep = key;
    },
    openAdd() {
      let vm = this;
      vm.addModal.open = true;
    },
    pageChange() {}
  },
  components: {}
};
</script>

<style lang="less" scoped>
.home {
  .one{
    margin-bottom: 10px;
  }
  .step-page {
    padding: 20px 0 10px;
    background: #fff;
    .el-steps-page {
      width: 100%;
    }
  }
}
</style>
